<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <base href="http://localhost/resource/front/">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/shopping-mall-index.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/zhonglin.js"></script>

    <link href="http://localhost/resource/back/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="http://localhost/resource/back/css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="http://localhost/resource/back/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l">您好，欢迎来到宅客微购</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
                    <a href="#"><img src="images/erweima-tu.jpg" /></a>
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>

<!--logo search 开始-->
<div class="hd-info1 w1200">
    <div class="logo f-l">
        <h1><a href="#" title="中林网站"><img src="images/logo.jpg" /></a></h1>
    </div>
    <div class="search f-r">
        <ul class="sp">
            <li class="current" ss-search="sp"><a href="JavaScript:;">商品</a></li>
            <li ss-search="dp"><a href="JavaScript:;">店铺</a></li>
            <div style="clear:both;"></div>
        </ul>
        <div class="srh">
            <div class="ipt f-l">
                <input type="text" placeholder="搜索商品..." ss-search-show="sp" />
                <input type="text" placeholder="搜索店铺..." ss-search-show="dp" style="display:none;" />
            </div>
            <button class="f-r">搜 索</button>
            <div style="clear:both;"></div>
        </div>
        <ul class="sp2">
            <li><a href="#">绿豆</a></li>
            <li><a href="#">大米</a></li>
            <li><a href="#">驱蚊</a></li>
            <li><a href="#">洗面奶</a></li>
            <li><a href="#">格力空调</a></li>
            <li><a href="#">洗发护发</a></li>
            <li><a href="#">葡萄 </a></li>
            <li><a href="#">脉动</a></li>
            <li><a href="#">海鲜水产</a></li>
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

<!--内容开始-->
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-admin-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" value="赵莉"
                       placeholder="" id="username" name="username" datatype="*2-16"
                       nullmsg="用户名不能为空" ajaxurl="http://localhost/auth/user/checkUsername">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="密码" name="password" autocomplete="off" value="12345678"
                       class="input-text"
                       datatype="*" nullmsg="密码不能为空">

            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="密码" name="repassword" autocomplete="off" value="12345678"
                       recheck="password"
                       class="input-text" datatype="*" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>手机：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" value="17759780879" placeholder="" id="phone" name="phone"
                       datatype="m" nullmsg="手机不能为空">
            </div>
            <div class="col-2"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-4">
                <input onclick="sendCode()" id="sms-text" type="button" class="btn btn-primary radius" value="获取验证码">
            </label>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>验证码：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" placeholder="" id="code" name="code"
                       datatype="n" >
            </div>
            <div class="col-2"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" value="854569279@qq.com" placeholder="@" name="email" id="email"
                       datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="http://localhost/resource/back/lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="http://localhost/resource/back/lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="http://localhost/resource/back/js/AjaxUtils.js"></script>
<script type="text/javascript">
/*    function sendCode(){
        var phone = $("#phone").val();
        if(!phone){
            layer.msg("请输入手机号")
        }
       var msg=$("#sms-text");
       msg.val("验证码已发送")
       msg.prop("disabled",true);
       time();
       var url="auth/user/sendMsg/"+phone;
       get(url,function () {
       });
       var t=60;
        function time(){
            var msg=$("#sms-text");
           t--;
           if(t<=0){
               msgText.prop("disabled", false);
               msgText.val("点击这里重新发送");
               t = 60;
               return;
           }
           msg.val("验证码已发送，请注意查收(" + t + ")s")
        }
        setTimeout(function () {
            time();
        }, 1000)
    }*/
function sendCode() {

    var phone = $("#phone").val();
    if (!phone) {
        layer.msg("请输入手机号");
        return;
    }

    var msgText = $("#sms-text");

    // 设置提示信息
    msgText.val("验证码已发送，请注意查收(60s)");

    // 禁用按钮
    msgText.prop("disabled", true); // attr

    console.info("点击了发送验证码的按钮");

    // 开始倒计时
    time();

    // 通知后台发送验证码
    var url ="auth/user/sendSms/"+phone;
    get(url,function(){});
}

var t = 60;

function time() {
    var msgText = $("#sms-text");
    t--;
    // 时间到0以后就停止
    if (t <= 0) {
        msgText.prop("disabled", false);
        msgText.val("点击这里重新发送");
        t = 60;
        return;
    }
    msgText.val("验证码已发送，请注意查收(" + t + ")s");
    setTimeout(function () {
        time();
    }, 1000)
}



    $(function () {
        $("#form-admin-add").Validform({
            tiptype: 2,
            // //注意：如果不是ajax方式提交表单，传入callback，这时data参数是当前表单对象，回调函数会在表单验证全部通过后执行，
            // 然后判断是否提交表单，如果callback里明确return false，则表单不会提交，如果return true或没有return，则会提交表单。
            callback: function (form) {
                var fromArray = form.serializeArray();
                var param = new Object();
                for (var i = 0; i < fromArray.length; i++) {
                    var name = fromArray[i].name; // 表单元素的name属性
                    var val = fromArray[i].value; // 表单元素对应的值
                    param[name]=val; // 给param对象中设置属性
                }
                console.info(param);
                // 4.使用ajax发送param数据到后台
                $.post("http://localhost/auth/user/addUser",param,function(data){

                    // 1.判断这个请求是否处理成功了
                    if(data.status == "success"){
                      location.href="http://localhost/auth/login.html"
                        // 提示用户操作成功，然后关闭添加用户的层
                    }else{
                        layer.msg(data.msg, {icon: 2,time:1000});
                    }

                },"JSON");
                return false;  // return false，则表单不会提交，
            }
        });
    });
</script>






<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>

</body>
</html>